<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link href="statics/css/web.css" rel="stylesheet" type="text/css">
	<title></title>
</head>
<body>

<div class="bigbox">
	
	<div class="headbox">
		<div class="back">
			<em></em>
		</div>
		<h3>
		<span>请选择省份</span>
	    </h3>
	</div>

	<div class="province item">
		<button>广西壮族自治区</button>
		<button>广东省</button>
		<button>四川省</button>
		<button>湖南省</button>
		<button>山东省</button>
		<button>黑龙江省</button>
		<button>吉林省</button>
		<button>湖北省</button>
		<button>海南省</button>
		<button>辽宁省</button>
		
	</div>
	<div class="city item" style="display:none">
		
		<button>柳州</button>
		<button>南宁</button>
		<button>桂林</button>
		<button>云浮</button>
		<button>广州</button>
		<button>梅州</button>
		<button>河源</button>
		<button>成都</button>
		<button>攀枝花</button>
		<button>长沙</button>
		<button>济南</button>
		<button>哈尔滨</button>
		<button>长春</button>
		<button>十堰</button>
		<button>海口</button>
		<button>本溪</button>
	</div>
	<div class="area item" style="display:none">

		<button>柳北区</button>
		<button>清秀区</button>
		<button>秀峰区</button>
		<button>云安区</button>
		<button>白云区</button>
		<button>梅江区</button>
		<button>源城区</button>
		<button>金牛区</button>
		<button>仁和区</button>
		<button>天心区</button>
		<button>市中区</button>
		<button>南岗区</button>
		<button>南关区</button>
		<button>勋阳区</button>
		<button>秀英区</button>
		<button>平山区</button>
	</div>

</div>
<script type="text/javascript" src="statics/js/jquery.js"></script>
<script type="text/javascript">
   //点击返回符号可以返回上一级
	$('.back').click(function(){
		$('.item').each(function(){
			if($(this).css('display')=='block'){
				var i=$(this).index()-2;
				console.log(i);
				if(i>-1){
					$('.item').hide();
					$('.item:eq('+i+')').show();
					// // 这个也行上面你的也行，你要上面下面就注释，你要下面上面就注释
					//  $('.item').css('display','none');
     //                $('.item:eq('+i+')').css('display','block');
				};
			};
		});
	});
	function showarea(btn){
		var cid=$(btn).val();//把文档转换为jquery对象，然后存放到变量cid里面
		

		$(".province").hide();//显示与隐藏
		$(".area").show();
		$(".city").hide();


	$(".area").empty();//清空县区
	$.get("data/area.json",function(res){//获取县区的json地址
       
       for(var i=0;i<res.length;i++){

       	if(cid==res[i].pid){
       	var btn='<button onclick="showarea(this)" value="'+res[i].id+'">'+res[i].name+'</button>';

       	$(".area").append(btn);//将获取到的区域添加到变量btn里面
       }

       }
	})
}

//
function showcity(btn){
	var pid=$(btn).val();
	// console.log(pid);

	$(".province").hide();
	$(".area").hide();
	$(".city").show();

	$(".city").empty();
	$.get("data/city.json",function(res){
		for(var i=0;i<res.length;i++){

			if(pid==res[i].pid){
			var btn='<button onclick="showarea(this)" value="'+res[i].id+'">'+res[i].name+'</button>';

			$(".city").append(btn);
		}

		}
	})
}

//
function Initprovince(){
	$(".province").empty();
	$.get("data/province.json",function(res){
		for(var i=0;i<res.length;i++){
			
			
			var btn='<button onclick="showcity(this)" value="'+res[i].id+'">'+res[i].name+'</button>';
			$(".province").append(btn); 
			

		}
	});
}




Initprovince();//函数调用

</script>
</body>
</html>